<template>
    <view>
        <view class="goods-item">
            <!-- 左侧的盒子 -->
            <view class="goods-item-left">
                    <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
            </view>
            <!--右侧的盒子  -->
            <view class="goods-item-right">
                <!--商品的名字  -->
                <view class="goods-name">{{goods.goods_name}}</view>
                <view class="goods-info-box">
                    <view class="goods-price">价格{{goods.goods_price | tofixed}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name:"my_goods",
        props:{
            goods:{
                type:Object,
                default:{}
            }
        },
        data() {
            return {
                defaultPic:'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1oUEw1.img?w=534&h=300&m=6'
                
            };
        },
        // 过滤器
        filters: {
            // 保留两位小数
            tofixed(num){
                return Number(num).toFixed(3)
            }
        }
  }  
</script>

<style lang="scss">
.goods-item{
    display: flex;
    padding:10px 5px ;
    border-bottom: 1px solid #f0f0f0;
    .goods-item-left{
        .goods-pic{
            width: 100px;
            height: 100px;
            display: block;
        }
    }
    .goods-item-right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .goods-name{
            font-size: 13px;
        }
        
        .goods-info-box{
            .goods-price{
                color: #C00000;
            }
        }
    }
}
</style>